<#import "/WEB-INF/sys/js_css.html" as js>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文回复</title>
<style type="text/css">
	#news_ul{width: 600px; margin-left: 20px;}
	#news_ul li{line-height: 30px;list-style-type:none; width: 600px; float: left;}
	#news_ul li span{float: left; width:90px; font-weight: 400; font-style: normal;}
	#news_ul li div{float: right; width: 510px; color: #ccc}
	#news_ul li div img{float: left;}
	#news_ul li div input{float: left;}
	#news_ul li div span{float: left;}
</style>
</head>
<body>
<!-- 工具条 -->
	<div id="tools" style="padding:5px;height:auto">
		<a href="javascript:void(0)" id="btn_top_add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加图文回复</a>
	</div>
	<table id="datagrid" class="easyui-datagrid" data-options="singleSelect:true,fit:true,fitColumns:true,pagination:true,
		url:'${ctx}/sys/weixin/search_news',toolbar:'#tools',rownumbers : true,pageSize:15,pageList:[5,10,15,20]">
	    <thead>
			<tr>
				<th data-options="field:'id',hidden:true">id</th><!-- hidden -->
				<th data-options="field:'action',align:'center',width:20,formatter:formatterAction">操作</th>
				<th data-options="field:'keyword',width:40,align:'center'">关键词</th>
				<th data-options="field:'matchtype',align:'center',width:20">匹配类型</th>
				<th data-options="field:'createTime',align:'center',width:20">添加时间</th>
			</tr>
		</thead>
    </table>
    <!-- 添加自定义文本回复信息 -->
    <div id="divpadd" class="easyui-window" title="添加图文回复" data-options="modal:true,collapsible:false,closed:true,minimizable:false,
		maximizable:false, height:600, width:680,onClose:divaddclose">
		<form id="topaddform" method="post">
			<input type="hidden" name="id" id="add_id" value="" />
			<ul style="width: 600px; margin-left: 20px;">
				<li style="line-height: 30px;list-style-type:none; width: 600px; float: left;">
					<span style="float: left; width:90px; font-weight: 400; font-style: normal;">关键字：</span>
					<div style="float: right; width: 510px; color: #ccc"><input type="text" name="keyword" id="add_keyword" value="" size="55" /></div>
				</li>
			</ul>
			<ul id="news_ul">
				
			</ul>
			<ul style="width: 600px; margin-left: 20px;">
				<li style="line-height: 30px;list-style-type:none; width: 600px; float: left;">
					<div style="margin-left: 180px;">
						<a href="javascript:void(0)" id="btn_top_add_signle" class="easyui-linkbutton" iconCls="icon-add" plain="true" style="float: left;">添加回复</a>&nbsp;
						<a href="javascript:void(0)" id="btn_top_add_delete" class="easyui-linkbutton" iconCls="icon-remove" plain="true" style="float: left;">删除所选回复</a>&nbsp;
						<a href="javascript:void(0)" id="btn_top_add_save" class="easyui-linkbutton" iconCls="icon-save" plain="true" style="float: left;">保存回复</a>
					</div>
				</li>
			</ul>
		</form>
	</div>
	<!-- 上传文件信息 -->
	<div id="add_window_microimg_upload" class="easyui-window" title="选择文件" data-options="modal:true,collapsible:false,closed:true,minimizable:false,maximizable:false,resizable:false">
		<form id="microimg_upload_form" action="${ctx}/sys/file/microimgupload" enctype="multipart/form-data" method="post">
			缩略图选择：<input type="file" id="microimg" name="microimg" value="" onchange="microimgfilter()" />
			<a href="javascript:void(0)" class="easyui-linkbutton" id="microimg_btn_upload" plain="true" onclick="upload_img_save()">确认上传</a>
		</form>
	</div>
</body>
</html>
<@js.easyui />
<script type="text/javascript">
jQuery(document).ready(function() {
	var empty_ul_li ="<li class='ul_li_css'>"+
	"<ul>"+
	"<li><span>图文消息标题：</span><div><input type='text' name='title' value='' class='ul_title' size='55' /></div></li>"+
	"<li><span>链接地址：</span><div><input type='text' name='url' value='' class='ul_url' size='55' /></div></li>"+
	"<li><span>图片：</span><div><img width='90px' height='50px' src='' /><input type='button' value='选择' onclick='fileupload(this)' />"+
	"<input type='hidden' name='fileid' value='' class='ul_fileid' />&nbsp;&nbsp;图片建意360*200</div></li>"+
	"<li><span>图文消息描述：</span><div><textarea rows='8' class='ul_desc' cols='45' id='add_rtext' name='rtext'></textarea></div></li>"+
	"<li>&nbsp;</li>"+
	"</ul>"+
	"</li>";
	var empty_ul_li_sce ="<li class='ul_li_css'>"+
	"<ul>"+
	"<li><span>图文消息标题：</span><div><input type='text' name='title' value='' class='ul_title' size='55' /><input type='checkbox' class='chkaction' style='float: right;' /></div></li>"+
	"<li><span>链接地址：</span><div><input type='text' name='url' value='' class='ul_url' size='55' /></div></li>"+
	"<li><span>图片：</span><div><img width='50px' height='50px' src='' /><input type='button' value='选择' onclick='fileupload(this)' />"+
	"<input type='hidden' name='fileid' value='' class='ul_fileid' />&nbsp;&nbsp;图片建意200*200</div></li>"+
	"<li><span>图文消息描述：</span><div><textarea rows='8' class='ul_desc' cols='45' id='add_rtext' name='rtext'></textarea></div></li>"+
	"<li>&nbsp;</li>"+
	"</ul>"+
	"</li>";
	//添加图文回复
	jQuery("#btn_top_add").click(function(){
		jQuery("#divpadd").window("open");
		jQuery("#topaddform").form("clear");
		jQuery("#news_ul").empty();
		jQuery("#news_ul").append(empty_ul_li);
	});
	//删除图文回复
	jQuery("#btn_top_add_delete").click(function(){
		/*if(jQuery(".ul_li_css").length<2){
			jQuery.messager.alert("信息","最后一个图文回复信息不允许删除！","info");
			return;
		}*/
		jQuery.each(jQuery(".chkaction"),function(i,n){
			if(n.checked){
				var div = jQuery(n).parent().parent().parent().parent();
				jQuery(div).remove();
			}
		});
	});
	//添加单个图文回复
	jQuery("#btn_top_add_signle").click(function(){
		if(jQuery(".ul_li_css").length>9){
			jQuery.messager.alert("信息","图文回复信息最多添加10条！","info");
			return;
		}
		jQuery("#news_ul").append(empty_ul_li_sce);
	});
	//保存图文信息事件
	jQuery("#btn_top_add_save").click(function(){
		//关键字
		if(jQuery("#add_keyword").val()==""){
			jQuery.messager.alert("信息","请输入关键字！","info");
			return;
		}
		//验证每条信息的标题
		var btitle = true;
		jQuery.each(jQuery(".ul_title"),function(i,n){
			if(jQuery(n).val()=="")
				btitle = false;
		});
		if(!btitle){
			jQuery.messager.alert("信息","有图文回复的标题为空！","info");
			return;
		}
		//验证每条信息的url链接地址
		var burl = true;
		jQuery.each(jQuery(".ul_url"),function(i,n){
			if(jQuery(n).val()=="")
				burl = false;
		});
		if(!burl){
			jQuery.messager.alert("信息","有图文回复的链接地址为空！","info");
			return;
		}
		var burlval = true;
		jQuery.each(jQuery(".ul_url"),function(i,n){
			var checkfiles=new RegExp("((^http)|(^https)|(^ftp)):\/\/(\\w)+\.(\\w)+");
			if(!checkfiles.test(jQuery(n).val()))
				burlval = false;
		});
		if(!burlval){
			jQuery.messager.alert("信息","有图文回复的链接地址不合法！","info");
			return;
		}
		//验证每条信息的图片
		var bfileid = true;
		jQuery.each(jQuery(".ul_fileid"),function(i,n){
			if(jQuery(n).val()=="")
				bfileid = false;
		});
		if(!bfileid){
			jQuery.messager.alert("信息","有图文回复的图片没有上传！","info");
			return;
		}
		//验证每条信息的图文消息描述
		var bdesc = true;
		jQuery.each(jQuery(".ul_desc"),function(i,n){
			if(jQuery(n).val()=="")
				bdesc = false;
		});
		if(!bdesc){
			jQuery.messager.alert("信息","有图文消息描述没有填写！","info");
			return;
		}
		//保存图文回复信息
		jQuery("#topaddform").form({
			url:"${ctx}/sys/weixin/news_add",
			success:function(data){
				var data = eval("(" + data + ")");
				if(data.error<1){
					jQuery.messager.alert("信息","图文信息保存成功！","info",function(){
						jQuery("#datagrid").datagrid("reload");
					});
				}else{
					jQuery.messager.alert("信息","图文信息保存失败！","error");
				}
				jQuery("#divpadd").window("close");
			}
		});
		jQuery("#topaddform").submit();
	});
});
//显示操作里的内容
function formatterAction(value,row,index){
	return "<img title='编辑' onclick='editfun(\""+row.id+"\")' src='${ctx}/js/easyui/themes/icons/pencil.png' />&nbsp;&nbsp;"+
	"<img title='删除' onclick='deletefun(\""+row.id+"\")' src='${ctx}/js/easyui/themes/icons/edit_remove.png' />";
}
//修改
function editfun(id){
	jQuery("#divpadd").window("open");
	jQuery("#topaddform").form("clear");
	jQuery("#news_ul").empty();
	//获取微信信息
	jQuery.ajax({
		async:false,
		type:"post",
		dataType:"json",
		data:{id:id},
		url:"${ctx}/sys/weixin/news",
		success:function(date){
			var len_count = date.length;
			for(var i=0;i<len_count;i++){
				if(i<1){
					jQuery("#add_id").val(date[i].id);
					jQuery("#add_keyword").val(date[i].keyword);
					continue;
				}else if(i<2){
					jQuery("#news_ul").append("<li class='ul_li_css'>"+
						"<ul>"+
						"<li><span>图文消息标题：</span><div><input type='text' name='title' value='"+date[i].title+"' class='ul_title' size='55' /></div></li>"+
						"<li><span>链接地址：</span><div><input type='text' name='url' value='"+date[i].url+"' class='ul_url' size='55' /></div></li>"+
						"<li><span>图片：</span><div><img width='90px' height='50px' src='"+date[i].filename+"' /><input type='button' value='选择' onclick='fileupload(this)' />"+
						"<input type='hidden' name='fileid' value='"+date[i].fileid+"' class='ul_fileid' />&nbsp;&nbsp;图片建意360*200</div></li>"+
						"<li><span>图文消息描述：</span><div><textarea rows='8' class='ul_desc' cols='45' id='add_rtext' name='rtext'>"+date[i].rtext+"</textarea></div></li>"+
						"<li>&nbsp;</li>"+
						"</ul>"+
						"</li>");
					continue;
				}
				jQuery("#news_ul").append("<li class='ul_li_css'>"+
					"<ul>"+
					"<li><span>图文消息标题：</span><div><input type='text' name='title' value='"+date[i].title+"' class='ul_title' size='55' /><input type='checkbox' class='chkaction' style='float: right;' /></div></li>"+
					"<li><span>链接地址：</span><div><input type='text' name='url' value='"+date[i].url+"' class='ul_url' size='55' /></div></li>"+
					"<li><span>图片：</span><div><img width='50px' height='50px' src='"+date[i].filename+"' /><input type='button' value='选择' onclick='fileupload(this)' />"+
					"<input type='hidden' name='fileid' value='"+date[i].fileid+"' class='ul_fileid' />&nbsp;&nbsp;图片建意200*200</div></li>"+
					"<li><span>图文消息描述：</span><div><textarea rows='8' class='ul_desc' cols='45' id='add_rtext' name='rtext'>"+date[i].rtext+"</textarea></div></li>"+
					"<li>&nbsp;</li>"+
					"</ul>"+
					"</li>");
			}
		}
	});
}
//删除
function deletefun(id){
	jQuery.messager.confirm("信息","删除此回复信息后用户出发关键字则没有回复，您确定要删除？",function(arg){
		if(!arg)
			return;
		jQuery.ajax({
			async:false,
			type:"post",
			dataType:"json",
			data:{id:id},
			url:"${ctx}/sys/weixin/delete",
			success:function(date){
				if(!date.success){
					jQuery.messager.alert("信息",date.message,"error");
					return;
				}
				//刷新页面
				jQuery("#datagrid").datagrid("reload");
			}
		});
	});
}
var btn_upload;
//上传图片事件
function fileupload(btn_upload_temp){
	btn_upload = btn_upload_temp;
	jQuery("#add_window_microimg_upload").window("open");
}
function upload_img_save(){
	//上传事件验证
	if(jQuery("#microimg").val()==""){
		jQuery.messager.alert("信息","请选择要上传的缩略图！","info");
		return;
	}
	if(!microimgfilter()){
		return;
	}
	jQuery("#microimg_upload_form").form("submit",{
		success:function(data){
			var data = eval("(" + data + ")");
			if(data.error<1){
				jQuery.messager.alert("信息","上传成功！","info",function(){
					jQuery(btn_upload).parent().find("img").attr("src", data.url);
					jQuery(btn_upload).parent().find(".ul_fileid").val(data.id);
				});
			}else{
				jQuery.messager.alert("信息","上传失败！","error");
			}
			jQuery("#add_window_microimg_upload").window("close");
		}
	});
}
//缩略图上传限制
function microimgfilter(){
	var file = document.getElementById("microimg");
	var fileName = file.value;
	var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length);
	if (!(file_typename == '.jpg'||file_typename == '.png')) {
		file.value="";
		jQuery.messager.alert("信息","请上传jpg与png格式的缩略图！");
		file.value="";
		return false;
	}
	return true;
}
//当关闭添加栏目的时候也关闭模版选择窗口
function divaddclose(){
	jQuery("#add_window_microimg_upload").window("close");
}
</script>